<template>
  <div class="home-root" ref="home_root">
    <div class="loading-wrapper" v-show="loadingFlag">
      <Loading></Loading>
    </div>
    <div class="kind">
      <div class="kind-title">
        <p>分类</p>
      </div>
      <div class="tag">
        <button :class="pageParam.nowKind===kind.name?'checked-kind':'unchecked-kind'" v-for="kind in noteKind" @click="kindClick(kind.name,kind.count)">
          <img :src="require('../assets/images/noteKind/'+kind.src)" :alt="kind.name" />
          <span>{{kind.name}}</span>
          <span>【{{kind.count}}】</span>
        </button>
      </div>
    </div>
    <div class="article-list">
      <el-radio-group class="sort-gist" v-model="pageParam.sortNum">
        <el-radio :label="1">浏览排序</el-radio>
        <el-radio :label="2">时间排序</el-radio>
        <el-radio :label="3">点赞排序</el-radio>
      </el-radio-group>
      <div class="article" v-for="(article,index) in articles" @click="blogDetail(article.id)">
        <img class="preview-img" :src="article.src">
        <div class="article-title">
          <p>{{article.title}}</p>
        </div>
        <div class="article-message">
          <div class="article-view">
            <img src="../assets/images/view.png"><span> {{article.view}}</span>
          </div>
          <div class="article-approve">
            <img src="../assets/images/approve.png"><span> {{article.approve}}</span>
          </div>
          <div class="article-date">
            <span>{{article.time}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="page-number">
      <el-pagination
        @current-change="pageChange"
        :current-page.sync=pageParam.currentPage-1
        :page-size="35"
        layout="prev, pager, next, jumper"
        :total= pageParam.totalCount>
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import Loading from "./Loading";
    export default {
      name: "Node",
      components: {Loading},
      data(){
        return{
          loadingFlag: true,  //加载中
          noteKind: [],       //笔记分类
          articles: [],       //文章集合
          pageParam: {
            nowKind: '',      //当前选中类型
            totalPage: 1,       //总页数
            totalCount: 0,
            currentPage: 1,     //当前页码
            sortGist: 'view',  //根据什么排序
            sortNum: 1    //排序label选中的数字
          },
        }
      },
      comments:{
        Loading
      },
      methods: {
        //点击分类按钮
        kindClick(kindName,count){
          this.$parent.searchText = '';
          this.pageParam.currentPage = 1;
          this.pageParam.totalCount = count*1;
          if(kindName===this.pageParam.nowKind){
            this.pageParam.nowKind = '';
          }else {
            this.pageParam.nowKind = kindName;
          }
          this.getArticle();
        },

        //按搜索按钮时
        searchArticle(){
          this.loadingFlag = true;
          this.pageParam.nowKind = '';
          this.pageParam.currentPage = 1;
          let searchText = this.$parent.searchText;
          this.$axios({
            method: 'get',
            url: 'http://localhost:8088/findBlogByKeywords',
            params: {
              keywords: searchText,
              sort: this.pageParam.sortGist,
              reqPage: this.pageParam.currentPage
            },
          }).then((response)=>{
            this.pageParam.totalCount = response.data.page.count;
            this.articles = response.data.articles;
            this.pageParam.currentPage = this.pageParam.currentPage+1;
            this.loadingFlag = false;
          }).catch(()=>{
            this.$message({
              showClose: true,
              message: '搜索出现了错误，换个关键字试试',
              type: 'error'
            });
            this.loadingFlag = false;
          })
        },

        /*时间升序  1
           时间降序  2
           点赞数量  3
           浏览数量  4
           类型名、当前页码、排序依据、搜索文本 */
        getArticle(){
          this.loadingFlag = true;
          let _this = this;
          let kindName = this.pageParam.nowKind;
          let currentPage = this.pageParam.currentPage;
          let sortGist = this.pageParam.sortGist===""?'view':this.pageParam.sortGist;
          let searchText = this.pageParam.searchText;
          //取得总记录数
          let blogCount = 0;
          //判断有没有选中类型
          if(kindName===""){
            this.noteKind.forEach((e)=>{
              blogCount += e.count*1;
            });
          } else {
              this.noteKind.forEach((e)=>{
                if(e.name===kindName)
                blogCount = e.count*1;
            });
          }
          if(blogCount === 0){
            _this.$message({
              showClose: true,
              message: '此分类还未添加文章哦',
            });
          }else {
            //计算总页数
            let temp = blogCount % 35;
            _this.pageParam.totalPage = temp===0 ? blogCount/35:Math.ceil(blogCount/35);
            if(currentPage <= _this.pageParam.totalPage){
              //发送请求
              _this.$axios({
                method:'post',
                params:{
                  kindName: kindName,
                  reqPage: currentPage,
                  sort: sortGist,
                  context: searchText
                },
                url:'http://localhost:8088/findBlog'
              }).then((response) =>{
                _this.articles = response.data.articles;
                _this.pageParam.currentPage = currentPage+1;
                _this.pageParam.searchText = searchText;
                this.loadingFlag = false;
              }).catch(() =>{
                this.loadingFlag = false;
                this.$message({
                  showClose: true,
                  message: '笔记列表加载失败，刷新试试',
                  type: 'error'
                });
              });
            }
          }
          _this.loadingFlag = false;
        },

        //获取分类列表
        getKinds(){
          this.$axios({
            method: 'post',
            url: 'http://localhost:8088/findNodeKind'
          }).then((response)=>{
            this.noteKind = response.data;
            this.getArticle();
          }).catch(()=>{
            this.$message({
              showClose: true,
              message: '笔记分类列表加载失败，刷新试试',
              type: 'error'
            });
          })
        },

        //页码点击
        pageChange(pageNum) {
          this.pageParam.currentPage = pageNum;
          this.getArticle();
        },

        //跳转博客详情
        blogDetail(id){
          let bogDetail = this.$router.resolve({
            query: {id: id},
            path:'/BlogDetail'
          });
          window.open(bogDetail.href, '_blank');
        },
      },
      mounted() {
        //获取分类列表
        this.getKinds();
      },
      watch: {
        // 数据发生变化就会调用这个函数
        'pageParam.sortNum': {
          handler(newVal) {
            switch (newVal) {
              case 1:
                this.pageParam.sortGist='view';
                break;
              case 2:
                this.pageParam.sortGist='time';
                break;
              case 3:
                this.pageParam.sortGist='approve';
                break;
            }
            if(this.$parent.searchText!==""){
              this.pageParam.currentPage = this.pageParam.currentPage-1;
              this.searchArticle();
            }else {
              this.pageParam.currentPage = this.pageParam.currentPage-1;
              this.getArticle();
            }
          },
        }
      }
    }
</script>

<style scoped>
  .home-root{

  }
  .loading-wrapper{
    width: 100%;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
  }
  .kind{
    text-align: center;
    padding-bottom: 30px;
  }
  @media only screen and (max-width: 763px){
    .kind{
      display: none;
    }
    .article-title{
      height: auto !important;
    }
    .article-list {
      margin-top: 0 !important;
      background: #f1f1f1;
      padding: 30px 30px;
    }
  }
  .kind-title p{
    width: auto;
    margin-top: 10px;
    margin-bottom: 15px;
    font-weight: bold;
    padding: 5px 0;
    display:inline-block;
    border-bottom: black 3px solid;
  }
  .unchecked-kind{
    border-radius: 5px;
    padding: 8px 8px;
    font-weight: bold;
    border: none;
    background: #f2f2f2;
    margin: 10px 10px;
    transition: 500ms;
  }
  .checked-kind{
    border-radius: 5px;
    padding: 8px 8px;
    font-weight: bold;
    border: none;
    box-shadow: 0 15px 10px -15px #363636;
    margin: 10px 10px;
    background: #bfbfbf !important;
    transition: 500ms;
  }
  .tag button img{
    vertical-align: middle;
    width: 35px;
    height: 35px;
    transition: 800ms;
  }
  .tag button:hover{
    background: #bfbfbf;
  }
  .tag button:hover img{
    transform: rotate(360deg);
  }
  .tag button span:last-child {
    color: #5ea14e;
  }
  .article-list{
    background: #f1f1f1;
    padding: 30px 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .sort-gist{
    width: 100%;
    text-align: center;
  }
  .article{
    background: white;
    width: 285px;
    border-radius: 5px;
    margin: 20px 20px;
    transition: 300ms;

  }
  .article:hover{
    box-shadow: 0 0 15px #575757;
  }
  .article-title{
    height: 100px;
  }
  .article-title p{
    margin: 5px 5px;
    word-break:break-all;
    word-wrap:break-word;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5; /*控制文字行数*/
  }
  .preview-img{
    width: 285px;
    height: 190px;
    object-fit: cover;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  .article-title{
    font-family: cursive;
    padding: 10px 10px;
  }
  .article-message{
    border-top: 1px solid #dbdad2;
    color: darkgrey;
    padding: 10px 10px;
    font-size: small;
    overflow:auto;
  }
  .article-view{
    float: left;
    margin-right: 10px;
    min-width: 50px;
  }
  .article-view img{
    width: 20px;
    height: 15px;
    vertical-align: middle;
  }
  .article-view span{
    vertical-align: middle;
  }
  .article-approve{
    float: left;
    margin-right: 10px;
    min-width: 50px;
  }
  .article-approve img{
    width: 15px;
    height: 15px;
    margin-top: -3px;
    vertical-align: middle;
  }
  .article-approve span{
    margin-top: 2px;
    vertical-align: middle;
  }
  .article-date{
    float: right;
  }
  .page-number{
    width: 100%;
    text-align: center;
    margin: 20px auto;
  }
</style>

<style>
  /*  搜索框选中颜色*/
  .el-input__inner:focus{
    border: 1px solid #59983a;
  }
</style>
